<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
// const active = ref(0)
const router = useRouter()
const isTabbarPage = ref(false)

watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    console.log('newValue', newValue)
    // 判断内页处理tabbar
    if (newValue.meta) {
      isTabbarPage.value = !!newValue.meta.tabbar
    }
  },
  { immediate: true }
)
</script>

<template>
  <div class="container_main" :class="{ bar_bom_padding: isTabbarPage }">
    <router-view></router-view>
  </div>
  <!-- <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="search">购物车</van-tabbar-item>
    <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
  </van-tabbar> -->
  <van-tabbar route>
    <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item replace to="/about" icon="search">我的</van-tabbar-item>
  </van-tabbar>
</template>

<style lang="scss" scoped>
.container_main {
  background-color: #eee;
  min-height: 100vh;
}

.bar_bom_padding {
  padding-bottom: var(--van-tabbar-height);
}
</style>
